<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <!-- 引入 layui.css -->
    <!--    <link href="layui/layui.css" rel="stylesheet">-->
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

    <link rel="stylesheet" href="elementUI/elementCSS.css"/>
    <!--    <--引入element的图标库-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->

    <link rel="stylesheet" href="css/index.css">
    <title>图书展示页面</title>
    <style>
        [v-cloak] {
            display: none;
        }

        /* 设置模态框的宽度和高度 */
        .modal-dialog {
            max-width: 1200px;
            width: 1200px;
        }

        .modal-content {
            height: 800px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <!--头部-->
    <nav class="navbar">
        <div class="nav-container" style="width: 100%;position: relative;">
            <a href="book.html" class="brand"><i class="bi bi-house-door"></i> 首页</a>
            <ul class="nav-links">
                <li @click="showAi" style="cursor: pointer;"><i class="bi bi-chat-right-text"></i> ai解惑</a></li>
                <li><a href="dingdan.html"><i class="bi bi-clipboard-data"></i> 我的订单</a></li>
                <li><a href="gouwuche.html"><i class="bi bi-cart"></i> 我的购物车</a></li>
                <li><a href="myborrow.html"><i class="bi bi-journal-check"></i> 借书记录</a></li>
                <li><a href="#"><i class="bi bi-heart"></i> 我的收藏</a></li>
                <li><a href="gonggao.html"><i class="bi bi-megaphone"></i> 系统公告(5)</a></li>
                <li><a href="wenda.html"><i class="bi bi-chat-text"></i> 问答(5)</a></li>
                <li style="margin-left: 100px;">
                    <img @click="show_alter_info" style="width: 32px;cursor: pointer;" :src="user.profile" alt="">
                </li>
                <li><a href="zhuye.html"><i class="bi bi-person"></i> 主页</a></li>
                <li @click="logout"><i class="bi bi-box-arrow-right"></i> 退出登录</li>
            </ul>
        </div>
    </nav>
    <!--头部end-->

    <div class="announcement-wrapper">
        <div class="announcement">
            <i class="bi bi-info-circle"></i> 欢迎访问我站！请注意最新公告内容。祝您在本站愉快！
        </div>
    </div>

    <div class="container-fluid" style="margin-bottom: 56px;margin-top: 56px;">
        <div class="row">
            <div class="col-md-8">
                <el-card class="box-card">
                    <el-descriptions title="用户信息">
                        <el-descriptions-item label="用户名"><i class="bi bi-person-circle"></i> kooriookami
                        </el-descriptions-item>
                        <el-descriptions-item label="手机号"><i class="bi bi-phone"></i> 18100000000
                        </el-descriptions-item>
                        <el-descriptions-item label="居住地"><i class="bi bi-geo-alt"></i> 苏州市</el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small"><i class="bi bi-building"></i> 学校</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系地址"><i class="bi bi-envelope"></i> 江苏省苏州市吴中区吴中大道
                            1188 号
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-carousel height="500px" :interval="5000" indicator-position="none">
                    <el-carousel-item v-for="(item,index) in img_list" :key="index">
                        <img :src="item" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="col-md-4">
                <!--公告栏-->
                <el-card class="box-card">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="bi bi-megaphone" style="color: red;"></i> 系统公告
                        </div>
                        <div class="layui-card-body layui-text" v-for="(item,index) in gonggao_list" :key="index">
                            <div @click="goto_gonggao_detail(item)" class="layuimini-notice">
                                <div class="layuimini-notice-title">{{item.title}}</div>
                                <div class="layuimini-notice-extra">{{formatDate(item.time)}}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!--数据统计start-->
                <div class="layui-card">
                    <div class="layui-card-header"><i class="bi bi-bar-chart-line"></i> 数据统计</div>
                    <div class="layui-card-body">
                        <div class="welcome-module">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-blue">实时</span>
                                                <h5><i class="bi bi-people"></i> 用户统计</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-cyan">实时</span>
                                                <h5><i class="bi bi-box-seam"></i> 商品统计</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-orange">实时</span>
                                                <h5><i class="bi bi-binoculars"></i> 浏览统计</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-green">实时</span>
                                                <h5><i class="bi bi-receipt"></i> 订单统计</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--            数据统计end-->
            </div>
        </div>
    </div>

    <h1 style="text-align: start; position: relative;left: 38px;"><i class="bi bi-book"></i> 图书列表</h1>
    <div class="book-container" id="book-container">
        <li v-for="(item, index) in data_list.slice(1, 17)" :key="index" class="book">
            <div class="cover">
                <!-- target="_blank" 可以使得a标签在新页面打开 @click="goto_book_detail(item)"-->
                <a :href="'xaingqing.html?id='+item.id">
                    <img :src="item.url">
                </a>
            </div>
            <div class="text">
                <div class="bookName">
                    <a :title="item.bookname"
                       previewlistener="true">{{item.bookname}}</a>
                </div>
                <div class="autPub">
                    <span class="author">{{item.author}}</span>
                    <span class="publisher">{{item.cbs}}</span>
                </div>
                <div class="priceWrap">
                    <span class="dPrcie"><i class="bi bi-currency-dollar"></i> 定价：{{item.price}}元</span>
                </div>
                <div class="addToCar">
                    <button @click="add_to_cart(item)" class="layui-btn layui-btn-sm layui-btn-normal"><i
                            class="bi bi-cart-plus"></i> 加入购物车
                    </button>
                </div>
            </div>
        </li>
    </div>

    <!-- 底部页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <!-- 第一列 -->
            <div class="footer-column">
                <h3><i class="bi bi-building"></i> 公司信息</h3>
                <ul>
                    <li><a href="#"><i class="bi bi-info-circle"></i> 关于我们</a></li>
                    <li><a href="#"><i class="bi bi-box"></i> 服务</a></li>
                    <li><a href="#"><i class="bi bi-people"></i> 团队</a></li>
                    <li><a href="#"><i class="bi bi-envelope"></i> 联系</a></li>
                </ul>
            </div>
            <!-- 第二列 -->
            <div class="footer-column">
                <h3><i class="bi bi-question-circle"></i> 帮助中心</h3>
                <ul>
                    <li><a href="#"><i class="bi bi-question-square"></i> 常见问题</a></li>
                    <li><a href="#"><i class="bi bi-life-preserver"></i> 支持</a></li>
                    <li><a href="#"><i class="bi bi-shield-lock"></i> 隐私政策</a></li>
                    <li><a href="#"><i class="bi bi-file-text"></i> 条款和条件</a></li>
                </ul>
            </div>
            <!-- 第三列 -->
            <div class="footer-column">
                <h3><i class="bi bi-share"></i> 关注我们</h3>
                <p>在社交媒体上关注我们</p>
                <a href="#"><img src="https://image.flaticon.com/icons/svg/733/733547.svg" alt="Facebook"
                                 width="24"></a>
                <a href="#"><img src="https://image.flaticon.com/icons/svg/733/733579.svg" alt="Twitter" width="24"></a>
                <a href="#"><img src="https://image.flaticon.com/icons/svg/733/733558.svg" alt="Instagram"
                                 width="24"></a>
            </div>
        </div>
        <div class="footer-bottom">
            &copy; 2023 MyCompany. 保留所有权利。
        </div>
    </footer>


    <!-- 邮箱验证码弹窗 -->
    <div id="email-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="email-modal-label"
         aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="email-modal-label"><i class="bi bi-envelope-open"></i> AI解惑</h5>
                    </h5>
                    <button type="button" @click="closeModal" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="width:100%; height: 100%;">
                        <iframe src="https://yiyan.baidu.com/"
                                style="width: 100%; height: 100%; border: none;"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!-- 引入 jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入 layui.js -->
<script src="layui/layui.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/vue@2.js"></script>
<!-- 引入 Axios 库 -->
<script src="js/axios.min.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="js/data.js"></script>

<script src="js/pulblicfuntion.js"></script>
<script src="js/index.js"></script>
<!--<script>
    const books = [
        {
            title: "书籍1",
            author: "作者1",
            cover: "https://via.placeholder.com/200x300"
        },
        {
            title: "书籍2",
            author: "作者2",
            cover: "https://via.placeholder.com/200x300"
        },
        {
            title: "书籍3",
            author: "作者3",
            cover: "https://via.placeholder.com/200x300"
        },
        {
            title: "书籍4",
            author: "作者4",
            cover: "https://via.placeholder.com/200x300"
        }
    ];

    function displayBooks() {
        const bookContainer = document.getElementById('book-container');

        books.forEach(book => {
            const bookElement = document.createElement('div');
            bookElement.className = 'book';

            bookElement.innerHTML = `
                    <img src="${book.cover}" alt="${book.title}">
                    <div class="book-info">
                        <div class="book-title">${book.title}</div>
                        <div class="book-author">${book.author}</div>
                    </div>
                `;

            bookContainer.appendChild(bookElement);
        });
    }

    document.addEventListener('DOMContentLoaded', displayBooks);
</script>-->

</body>
</html>
